<template>
  <div class="addSpare">

    <section v-for="item in expenseList" class="top mt10 mr10 ml10 pt5 pb15 bgfff" >
      <div class="mess-item rowflex">
        <div class="c666 title">设备品牌</div>
        <!--<select id="type" type="text" placeholder="请填写">-->
          <!--<option v-for="item in Gparam.type">{{item}}</option>-->
        <!--</select>-->
        <input id="money" type="text" placeholder="请填写"/>
      </div>
      <div class="mess-item rowflex">
        <div class="c666 title">设备名称</div>
        <input id="money" type="text" placeholder="请填写"/>
      </div>
      <div class="mess-item rowflex">
        <div class="c666 title">规格型号</div>
        <input id="money" type="text" placeholder="请填写"/>
      </div>
      <div class="mess-item rowflex">
        <div class="c666 title">申请数量</div>
        <input id="money" type="text" placeholder="请填写"/>
        <!--<textarea id="statement" type="text" placeholder="请填写"></textarea>-->
      </div>
    </section>
    <div class="add-item blue" @click="addItem()">
      继续添加
    </div>

    <section class="bottom_bar cfff" @click="saveWorkPic()">
      提交申请
    </section>

  </div>

</template>

<script>
    import {
      Tab,
      TabItem,
      Swiper,
      SwiperItem,
      Group,
      Cell,
      CellBox,
      CellFormPreview,
      Badge,
      Confirm,
      Selector,
    } from 'vux'
    export default {
      name: "addSpare",
      components: {
        Tab, TabItem, Swiper, SwiperItem, Group, Cell, CellBox, CellFormPreview, Badge, Confirm,Selector
      },
      data() {
        return {
          expenseList: [
            {}
          ]
        }
      },
      methods: {
        saveWorkPic: function () {
          this.itemInfo.pic.push('../images/test3.jpg')
          setTimeout(function () {
            $("#picList").createImgWin()
          },1000)
        },
        addItem: function () {
          // var html = $('.top')
          // $(".add-item").before(html)
          var o = {}
          this.expenseList.push(o)
        }
      },
    }
</script>

<style lang="less">
  .addSpare{
    font-size: 0.13rem;
    overflow-x: hidden;
    margin-bottom: 1rem;
    .top{
      border-radius: 0.04rem;
      box-shadow: 0 0.02rem 0.04rem 0 #ebebeb;
    }
    .mess-item {
      margin-top: 0.1rem;
      line-height: 0.25rem;
      width: 100%;
    }
    .mess-item img {
      width: 0.07rem;
      margin-right: 0.03rem;
    }
    .mess-item .title-box {
      width: 0.52rem;
      display: flex;
      justify-content: space-between;
    }
    .mess-item .title {
      width: 0.52rem;
      margin-left: 0.1rem;
    }
    input[type="text"] {
      width: 2.71rem;
      height: 0.25rem;
      margin-left: 0.15rem;
      border-radius: 0.02rem;
      border: #dfdfdf 1px solid;
    }
    textarea{
      width: 2.71rem;
      margin-left: 0.15rem;
      border-radius: 0.02rem;
      border: #dfdfdf 1px solid;
    }
    select{
      width: 2.71rem;
      height: 0.25rem;
      margin-left: 0.15rem;
      border-radius: 0.02rem;
      border: #dfdfdf 1px solid;
    }
    .button-box{
      margin-top: 0.07rem;
      height: 0.6rem;
      border-top: solid 1px #ebebeb;
      line-height: 0.29rem;
    }
    .top-b{
      display: flex;
      justify-content: space-between;
    }

    .add-item{
      float: right;
      height: 0.24rem;
      line-height: 0.24rem;
      margin-top: 0.15rem;
      padding-left: 0.29rem;
      padding-right: 0.1rem;
      background: url('~assets/images2/icon_tianjiafeiyong@2x.png') no-repeat;
      background-size: auto 100%;
    }

    .bottom_bar {
      width: 100%;
      background: #42a3fd;
      line-height: 0.43rem;
      font-size: 0.15rem;
      text-align: center;
    }
  }
</style>
